<template>
	<div class="content">
		<el-scrollbar class="content-scrollbar">
			<div class="send-pay-slip">
				<div class="steps">
					<el-steps :active="active" finish-status="success" align-center>
						<el-step title="上传"></el-step>
						<el-step title="数据校验"></el-step>
						<el-step title="设置并发送"></el-step>
					</el-steps>
				</div>
				<component
					:is="currentComponent"
					:slip-data="slipData"
					@step-next="handleStepNext"
					@get-slip-data="getSlipData"
				></component>
			</div>
		</el-scrollbar>
	</div>
</template>

<script>
import PaySlipUpload from './components/PaySlipUpload'
import PaySlipDataValidation from './components/PaySlipDataValidation'
import PaySlipSetSend from './components/PaySlipSetSend'

export default {
	name: 'SendPaySlip',
	components: { PaySlipUpload, PaySlipDataValidation, PaySlipSetSend },
	data() {
		const active = (this.$route.query?.active && +this.$route.query?.active) ?? 1
		return {
			active,
			slipData: []
		}
	},
	computed: {
		currentComponent() {
			return ['', 'PaySlipUpload', 'PaySlipDataValidation', 'PaySlipSetSend'][this.active]
		}
	},
	methods: {
		handleStepNext(val) {
			this.active = val
		},
		getSlipData(data) {
			console.log(data)
			this.slipData = data
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	.send-pay-slip {
		padding: 0 30px;
		.steps {
			width: 50vw;
			margin: 30px auto;
		}
	}
}
</style>
